
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器首页</title>    
    <a href="./选择器和盒子模型首页.html">首页</a>
</head>
<body>
<h1>点击水母吧</h1>
<div id="header">
<ul class="picture">

<div id="div01">
    <a href="./选择器/基础选择器.html">
    <img src="./中间.png" class="img"><br>
    </a>
</div>

<div id="div02">
    <a href="./选择器/属性选择器.html">    
    <img src="./右.png" class="img"><br>
    </a>
</div>

<div id="div03">
    <a href="./选择器/关系选择器.html"> 
         <img src="./左.png" class="img"><br>
    </a>
</div>

<div id="div04">
    <a href="./选择器/伪元素选择器.html">  
        <img src="./右.png" class="img"><br>
    </a>
</div>

<div id="div05">
    <a href="./选择器/链接伪类2.html">  
        <img src="./左.png" class="img"><br>
    </a>
</div>

<div id="div06">
    <a href="./选择器/结构伪类3.html">  
        <img src="./左.png" class="img"><br>
    </a>
</div>
</ul>
</div>
</div>

<style>
    body{
    background:url("./水母田.jpg");background-attachment: fixed;
    background-size: cover;
    }
    h1{
    text-align: center;
    color:rgb(255, 255, 255);
    line-height: 180px;
    margin: -2% 0;
    }
    div{
    width: 250px;
    height: 250px;
    }
    
    #header{
    width: 1190px;
    }

    #div01{
        margin: -1% 60%;
    }
    #div02{
        margin: -4% 50%;
    }
    #div03{
        margin: -5% 70%;
    }
    #div04{
        margin: -35% 95%;
    }
    #div05{
        margin: -40% 80%;
    }
    #div06{
        margin: -40% 95%;
    }


    img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    }

    .picture :hover{
    transform:scale(1.1);
    }
    
    </style>
</body>
</html>

